import { Col, Form, Input, Row, Select } from 'antd';
import React from 'react';

import TemplateTextArea from '@/components/common/TemplateTextArea';
import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import {
  FONTSIZE_LIST,
  SHOPEE_FONT,
  SHOPEE_FONT_DEFAULT,
  SHOPEE_FONT_TYPOGRAPHY,
  TYPOGRAPHY
} from '../../../../../../../../../constant';
import RichTextAddOn from './RichTextAddon';
import { getFontFamily, getShopeeFontFamily } from './utils';

const { Option } = Select;

interface Props {
  layer: LayerInfoFE;
  onChange: (values: any) => void;
}

const TextConfigs = ({ layer, onChange }: Props): JSX.Element => {
  const data = layer.data.text;
  const fontFamily = getFontFamily(data.fontFamily);
  const shopeeFontFamily =
    fontFamily === SHOPEE_FONT ? getShopeeFontFamily(data.fontFamily) : '';

  return (
    <>
      <Row gutter={[24, 12]}>
        <Col span={24}>
          <Form.Item name={['data', 'text', 'content']}>
            <TemplateTextArea
              maxLength={120}
              lineBreakSymbol="<br/>"
              autoSize={{ minRows: 1, maxRows: 4 }}
              placeholder="Your product is great! Say something about it!"
            />
          </Form.Item>
        </Col>
      </Row>
      <div className="flex justify-evenly gap-x-2">
        <Form.Item className="flex-1">
          <Select
            value={fontFamily}
            onChange={(value): void =>
              onChange({
                data: {
                  text: {
                    fontFamily:
                      value === SHOPEE_FONT ? SHOPEE_FONT_DEFAULT : value
                  }
                }
              })
            }
          >
            {Object.keys(TYPOGRAPHY).map((item) => (
              <Option value={item} key={item}>
                <span style={TYPOGRAPHY[item]}>{item}</span>
              </Option>
            ))}
          </Select>
        </Form.Item>
        {fontFamily === SHOPEE_FONT && (
          <Form.Item className="flex-1">
            <Select
              value={shopeeFontFamily}
              onChange={(value): void =>
                onChange({
                  data: { text: { fontFamily: `${fontFamily}-${value}` } }
                })
              }
            >
              {SHOPEE_FONT_TYPOGRAPHY.map((item) => (
                <Option value={item} key={item}>
                  {item}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
        <Form.Item name={['data', 'text', 'fontSize']} className="flex-1">
          <Select>
            {FONTSIZE_LIST.map((item) => (
              <Option value={item} key={item}>
                {item}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </div>
      <RichTextAddOn layer={layer} onChange={onChange} />
    </>
  );
};

export default TextConfigs;
